<template>
	<a-card>
		<a-form layout="inline" :model="formState">
			<a-form-item label="角色名称">
				<a-input v-model:value="formState.role" placeholder="请输入角色名称">
				</a-input>
			</a-form-item>
			<a-form-item>
				<a-button style="margin-right: 8px"  type="primary" html-type="submit" class="searchButton" @click="init">
					查询
				</a-button>
				<a-button class="editable-add-btn" type="primary" @click="addOpen = true">新增</a-button>
			</a-form-item>
		</a-form>

		<a-table :scroll="{ x: 400 }" childrenColumnName="child" ref="table" :row-key="(record) => record.role_id"
			 :columns="columns" :data-source="tabledata">
			<template #bodyCell="{ column, record }">

				<template v-if="column.key === 'action'">
					<a-popconfirm title="确定要删除该数据" ok-text="确定" cancel-text="取消" @confirm="deleteConfirm(record)">
						<a-button type="link" style="color: red;">删除</a-button>
					</a-popconfirm>
					<a-button type="link" @click="editOpenclick(record)">编辑</a-button>
					<a-button type="link" @click="roleOpenclick(record)">权限</a-button>
				</template>
			</template>
		</a-table>
		<a-drawer v-model:visible="addOpen" class="custom-class" :root-style="{ color: 'blue' }" style="color: red"
			title="新增" placement="right">
			<a-form :model="addFormData">
				<a-form-item  label="角色名称">
					<a-input v-model:value="addFormData.role" placeholder="请输入角色名称">
					</a-input>
				</a-form-item>
				<a-form-item>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button style="margin-right: 8px" @click="addOpen = false">取消</a-button>
				<a-button type="primary" @click="handleAdd">提交</a-button>
			</template>
		</a-drawer>
		<a-drawer v-model:visible="editOpen" class="custom-class" :root-style="{ color: 'blue' }" style="color: red"
			title="编辑" placement="right">
			<a-form   :model="addFormData">
				<a-form-item  label="角色名称">
					<a-input v-model:value="addFormData.role" placeholder="请输入角色名称">
					</a-input>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-button style="margin-right: 8px" @click="editOpen = false">取消</a-button>
				<a-button type="primary" @click="handleedit">提交</a-button>
			</template>
		</a-drawer>
		<a-drawer v-model:visible="roleOpenShow" class="custom-class" :root-style="{ color: 'blue' }" title="角色权限"
			placement="right">
			<a-tree v-model:checkedKeys="checkedKeys" checkable :tree-data="treeData" :field-names="fieldNames">
			</a-tree>
			<template #footer>
				<a-button style="margin-right: 8px" @click="roleOpenShow = false">取消</a-button>
				<a-button type="primary" @click="handleRole">确定</a-button>
			</template>
		</a-drawer>

	</a-card>
</template>

<script>
import roleJsApi from '@/api/auth/role';
import moduleJsApi from '@/api/auth/module';
import { notification, message } from 'ant-design-vue'
export default {
	name: 'Other',
	data() {
		return {
			gData: [],
			addOpen: false,
			addFormData: {},
			rowSelection: {
				onChange: (selectedRowKeys, selectedRows) => {
					console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
				},
				onSelect: (record, selected, selectedRows) => {
					console.log(record, selected, selectedRows);
				},
				onSelectAll: (selected, selectedRows, changeRows) => {
					console.log(selected, selectedRows, changeRows);
				},
			},
			editOpen: false,
			formState: {},
			fieldNames: {
				children: 'child',
				key: 'module_id',
				title: 'name',
			},
			checkedKeys: ['1'],
			selectedKeys: [],
			columns: [
				{
					title: '角色名称',
					dataIndex: 'role',
					key: 'role',
					width: '100px'
				},
				{
					title: '操作',
					dataIndex: 'action',
					key: 'action',
					align:'center',
					width: '130px'
				},
			],
			tabledata: [],
			roleOpenShow: false,
			roleId: null,
			treeData: [],
		}
	},
	created() {
		moduleJsApi.moduleTree({ pid: 'null' }).then(res => {
			this.treeData = res
		})

		this.init()
	},
	methods: {

		init() {
			roleJsApi.roleList({ page: 1, ...this.formState }).then(res => {
				this.tabledata = res
			})
		},
		clicktree(selectedKeys) {
			this.formState.pid = selectedKeys[0]
			this.addFormData.pid = selectedKeys[0]
		},
		handleAdd() {
			if (this.addFormData && !this.addFormData.role) {
				notification['error']({
					message: '角色名称不能为空！',
				});
				return
			}
			roleJsApi.roleAdd(this.addFormData).then(res => {
				this.addOpen = false
				this.addFormData = {}
				this.init()
			})
		},
		deleteConfirm(record) {
			roleJsApi.roleDel({ id: record.role_id }).then(res => {
				this.formState = {}
				message.success('删除成功')
				this.init()
			})

		},
		roleOpenclick(record) {
			this.roleOpenShow = true
			this.selectedKeys = []
			this.checkedKeys = []
			this.roleId = record.role_id
			roleJsApi.roleAuthority({ id: record.role_id }).then(res => {

				this.selectedKeys = res.modules.split(',')
				if (this.selectedKeys && this.selectedKeys.length > 0) {
					this.selectedKeys.forEach(item => {
						this.checkedKeys.push(Number(item))
					})
				}

				// console.log(this.checkedKeys);
			})
		},
		editOpenclick(record) {
			this.addFormData = record
			this.editOpen = true
		},
		addOpenclick(record) {
			this.addFormData.pid = record.role_id
			this.addOpen = true
		},
		handleedit() {
			if (this.addFormData && !this.addFormData.role) {
				notification['error']({
					message: '角色名称不能为空！',
				});
				return
			}
			roleJsApi.roleEdit(this.addFormData).then(res => {
				this.editOpen = false
				this.addFormData = {}
				this.init()
			})
		},
		handleRole() {
			roleJsApi.roleJurisdiction({ role_id: this.roleId, module_list: this.checkedKeys }).then(res => {
				this.roleOpenShow = null
				this.selectedKeys = []
				this.checkedKeys = []
				this.roleId = null
			})
		}
	}
}
</script>
<style lang="less" scoped>
@import '../index.less';
</style>
